<template>
    <div class="nav">
      <ul class="clearfix">
        <li v-for="(item,index) in liList" @click="getIndexToList(item)">
          {{item.name}}
          <!--<router-link :to="item.path">{{item.name}}</router-link>-->
        </li>
      </ul>
      {{this.$store.state.count}} {{this.$store.getters.computedCount}}
      <button @click="incCount()">改变count</button>
    </div>
</template>

<script>
  import vueEvent from '../model/vueEvent';
  import store from '../vuex/store.js'; //引入vuex的store
    export default {
      name: "v-header",
      data(){
          return{
            liList:[
              {'name':'todoList','path':'/todoList'},
              {'name':'日程','path':'/schedule'},
              // {'name':'打卡','path':'/clock'},
              {'name':'阅读笔记','path':'/node'},
              {'name':'用户中心','path':'/user'}
            ],
          }
      },
      store, //注册store
      methods:{
          // 获取当前索引传递给TODOList组件
          getIndexToList(item){
            // 编程式路由  跳转到对应页面
            this.$router.push({'path':item.path});
            // this.$router.push({'name':'clock'});

            console.log(item);
            // 广播数据
            vueEvent.$emit('to-todoList',item);
          },

        // 改变vuex中的数据
        incCount(){
            // this.$store.commit('incCount')  //触发mutations中的incCount方法
          this.$store.dispatch('incMutationsCount'); //触发actions里边的incMutationsCount方法
        }
      },
    }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  a{
    text-decoration: none;
    color: whitesmoke;
  }
  .nav{
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #42b983;
    z-index: 99;
  }
  .nav li{
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    list-style: none;
  }
  .clearfix:before,.clearfix:after{
    content: '';
    display: table;
  }
  .clearfix:after{
    clear: both;
  }
</style>
